<template>
  <ul class="song-list" :style="{ paddingLeft: shownum ? '0px' : '10px' }">
    <li v-for="(song, index) in songlist" :key="index">
      <div v-if="shownum" :class="['shownum', { red: index < 3 }]">
        {{ index | formatOrder }}
      </div>
      <div class="left">
        <h3 v-html="$options.filters.highKey(song.name, keywords)"></h3>
        <span>
          <i  :class="{ 'sq-icon': song.song.privilege.maxbr == 999000 }" class="fa fa-h-square"></i>
          <b v-for="(artist, i) in song.song.artists" :key="i">
            <i v-html="$options.filters.highKey(artist.name, keywords)"></i>
            {{ i | filterChar(song.song.artists.length) }}
          </b>
          -
          <i class="right"
            v-html="$options.filters.highKey(song.song.album.name, keywords)"
          ></i>
        </span>
      </div>
      <i
        class="fa fa-play-circle-o"
        aria-hidden="true"
        @click="$emit('play', song)"
      ></i>
    </li>
  </ul>
</template>
<script>
export default {
  props: {
    songlist: {
      type: Array,
      default: function () {
        return [];
      },
    },
    shownum: {
      type: Boolean,
      default: false,
    },
    keywords: {
      type: String,
      default: "",
    },
  },
  created() {},
  filters: {
    filterChar(val, num) {
      return val < num - 1 ? "/" : "";
    },
    formatOrder(val) {
      val++;
      return val < 10 ? "0" + val : val;
    },
    highKey(val, keywords) {
      let reg = new RegExp(`${keywords}`, "g");
      if (reg.test(val)) {
        val = val.replace(reg, `<b style="color:red">${keywords}</b>`);
      }
      return val;
    },
  },
};
</script>
<style scoped lang="less">
.song-list {
  padding-top: 10px;
  li {
    display: flex;
    height: 40px;
    align-items: center;
    padding: 5px 10px 5px 0px;
    border-bottom: 1px solid #eee;
    position: relative;
    border-bottom: 2px solid rgba(231, 231, 231, 0.555);
    .shownum {
      width: 30px;
      height: 20px;
      margin: 10px;
      text-align: center;
      color: #333;
      &.red {
        color: red;
        font-size: 18px;
      }
    }
    div.left {
      flex: 1;
      padding-right: 10px;
      padding-top: 10px;
      padding-bottom: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      word-wrap: nowrap;
      word-break: normal;
      white-space: nowrap;
      h3 {
        font-size: 17px;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: nowrap;
        word-break: normal;
      }
      span {
        font-size: 13px;
        color: #888;
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: normal;
        white-space: nowrap;
        word-break: normal;
        i{
          &.fa{
            display: none;
          }
          &.sq-icon{
            width: 12px;
            height: 12px;
            position: absolute;
            display: block;
            color: orangered;
            top: 2px;
          }
        }
        b{
          i{
          margin-left:12px ;
        }
        }
      }
    }
    i.fa-play-circle-o {
      font-size: 28px;
      margin-right: 10px;
      color: #bebebe;
    }
  }
}
</style>